<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script>
      // 1. 检测设备是否支持刘海屏适配特性
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && 
        (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
      
      // 2. 创建meta元素（安全的文档流操作方式）
      // 生活例子：这就像写信时先把内容写在便签上，检查无误后再贴到信里
      var meta = document.createElement('meta');
      meta.name = 'viewport';
      meta.content = 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + 
                    (coverSupport ? ', viewport-fit=cover' : '');
      
      // 3. 将meta标签添加到head中
      // 安全检查：确保head元素存在（预防路径/权限错误）
      if (document.head) {
        document.head.appendChild(meta);
      } else {
        console.error('无法找到head元素，可能存在路径或权限问题');
      }
    </script>
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
